<template>
  <div>
    <div class="box-top">
      <el-button class="buttonAdd" @click="drawer = true" type="primary">添加企业</el-button>
    <div class="nav-inp">
      <el-input placeholder="输入id或者公司名称查询" v-model="search" class="input-with-select" @keyup.enter.native="handleQuery" />
    </div>
    </div>
    <el-table style="width: 100%" :data="tables">
      <el-table-column label="ID" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="公司名称" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="独立支付" width="180">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="drawer = true">编辑</el-button>
          <el-button size="mini" type="danger" @click="remove(scope.$index)">删除</el-button>
          <el-button size="mini" type="primary" @click="drawer = true">管理</el-button>
          <el-button size="mini" type="info" @click="drawer = true">参数</el-button>
          <el-button size="mini" type="info" @click="drawer = true">权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 侧边表单弹出 -->
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="45%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="企业名称">
          <el-input v-model="form.name" readonly style="width: 420px;"></el-input>
        </el-form-item>
        <el-form-item label="管理账号">
          <el-select v-model="form.region" placeholder="请选择账号">
            <el-option label="内蒙宏城" value="neimeng"></el-option>
            <el-option label="浙江宏城" value="zhejiang"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="输入密码" style="width: 500px;">
          <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" style="width: 500px;">
          <el-input placeholder="请再次输入密码" v-model="rpassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="主体数量" style="width: 500px;">
          <el-input-number v-model="num" :step="1" step-strictly></el-input-number>
        </el-form-item>
        <el-form-item label="企业logo">
          <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="企业官网">
          <el-input v-model="website" placeholder="请输入网址" style="width: 420px;"></el-input>
        </el-form-item>
        <el-form-item label="省/市/区">
          <Address></Address>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="FullAddress" style="width: 420px;"></el-input>
        </el-form-item>
        <el-form-item label="企业邮箱">
          <el-input v-model="Email" style="width: 420px;"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="Email" style="width: 420px;"></el-input>
        </el-form-item>
        <el-form-item label="传真">
          <el-input v-model="fax" style="width: 420px;"></el-input>
        </el-form-item>
        <el-form-item label="收款账号">
          <el-input v-model="accountNumber" style="width: 420px;"></el-input>
        </el-form-item>
        <el-form-item label="收款账户">
          <el-input v-model="account" style="width: 420px;"></el-input>
        </el-form-item>
        <el-form-item label="开户银行">
          <el-input v-model="bank" style="width: 420px;"></el-input>
        </el-form-item>
        <el-form-item  label="企业介绍">
        <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="1000" show-word-limit>
        </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import Address from "@/components/address";
export default {
  components: {
    Address
  },
  data() {
    return {
      tableData: [{
        date: '1',
        name: '内蒙宏城物业',
        value: true,
        address: '内蒙古虎山东路'
      }, {
        date: '2',
        name: '浙江宏城物业',
        value: false,
        address: '浙江'
      }, {
        date: '3',
        name: '物业03',
        value: true,
        address: '虎山雅园'
      }, {
        date: '4',
        name: '物业03',
        value: true,
        address: '羊肉串'
      }],
      form: {
        name: '在这里可以设置权限、功能',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      drawer: false,
      search: '',
      password: '',
      rpassword: '',
      num: 0,
      website: '',
      FullAddress: '',
      Email: '',
      fax: '',
      account: '',
      accountNumber: '',
      bank: '',
      text: '',
      textarea: ''
    }
  },
  computed: {
    // 模糊搜索
    tables() {
      const search = this.search
      if (search) {
        return this.tableData.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.tableData
    }
  },
  methods: {
    //提交事件
    onSubmit() {
      console.log('提交成功!');
    },
    remove(index) {
      this.$confirm("此操作将删除本条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  },

}
</script>
<style>
.box-top{
  margin-bottom: 8px;
}
.el-table,
.buttonAdd,
.nav-inp {
  margin-left: 20px;
}

.buttonAdd,
.nav-inp {
  margin-top: 20px;
}

.nav-inp {
  width: 300px;
  float: right;
  margin-right: 20px;
}

.el-drawer {
  overflow: auto;
  padding-top: 15px;

}

::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #ddd;
}
</style>
